{literal}
<script language="javascript" type="text/javascript" src="js/ajaxupload.3.5.js"></script>
<script type="text/javascript">
	$(function(){
		var btnUpload=$('#upload');
		var status=$('#status');
		var productid = document.getElementById("productid").value;
		new AjaxUpload(btnUpload, {
			action: 'controller.php?task=addproductimage&productid='+productid,
			name: 'uploadfile',
			onSubmit: function(file, ext){
				 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
                    // extension is not allowed
					status.text('Only JPG, PNG or GIF files are allowed');
					return false;
				}
				status.text('Uploading...');
			},
			onComplete: function(file, response){
				//On completion clear the status
				status.text('');
				//Add uploaded file to list
				if(response==="success"){
					loadPage("product/addimage/"+productid);
					$("#message_area").show();
					$("#message_area").html("<span class='success'>Image has been successfully uploaded.</span>");
					$('<li></li>').appendTo('#files').html('<img src="../images/products/thumbs/'+file+'" alt="" /><br />').addClass('success');
				} else{
					//$('<li></li>').appendTo('#files').text(file).addClass('error');
					loadPage("product/addimage/"+productid);
					$("#message_area").show();
					$("#message_area").html("<span class='error'>Sorry. Image is already uploaded. Please select another image.</span>");
					
				}
			}
		});
		
	});
</script>
{/literal}
<div id="page-heading">
	<h1>{$title}</h1>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td width="15%" height="100" align="center" valign="top">		
			<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table">
          		<tr>
            		<th align="left" class="table-header-repeat">&nbsp;</th>
          		</tr>
          		<tr>
            		<td>
            			<div id="upload">Upload File</div>
                                <div style="color: red;">Please Upload only box images</div>
            			<input type="hidden" name="productid" id="productid" value="{$productid}"/>
            			<!--<div id="browsegallery" onclick="browseAll();"><span>Browse All<span></div>    -->        	
            		</td>
          		</tr>
      		</table>
      	</td>
      	<td width="2%">&nbsp;</td>	
        <td width="35%" valign="top" align="center">
        	<span id="status" ></span>		
			<ul id="files" ></ul>			
			{if !empty($productimage_arr)}
			<div id="showimages">
				<ul id="product_files">
					{section name=sec1 loop=$productimage_arr}
						<li><img src="../images/products/{$productimage_arr[sec1].filename}" alt="" /><br /><a href="javascript: void(0);" onclick="delProductImage({$productid},{$productimage_arr[sec1].image_id})"><img src="images/icons/remove.png" class="cursor" /> Delete this image</a></li>
					{/section}
				</ul>
			</div>
			{else}
			<div id="showimages">Sorry. No image assign for this item</div>
			{/if}
        </td>		
	</tr>	
</table>